<template>
	<view class="cell">
		<view>
			<view class="flex">
				<image style="width:36rpx;height:36rpx;" src="https://oss.jxhecong.com/v2/image/message_bike@2x.png"></image>
				<view class="device-name" style="margin-left:12rpx;">设备：{{data.shellId}}|{{parseInt(data.code)+1}} 号</view>
			</view>
			<view class="flex" style="margin-top:15rpx;">
				<image style="width:24rpx;height:24rpx;margin-left:6rpx;" src="https://oss.jxhecong.com/v2/image/location@2x.png"></image>
				<view class="item-name" style="margin-left:18rpx;">{{data.chargingGroupName}}</view>
			</view>
			<view class="flex" style="margin-top:10rpx;">
				<image style="width:24rpx;height:24rpx;margin-left:6rpx;" src="https://oss.jxhecong.com/v2/image/time@2x.png"></image>
				<view class="item-name" style="margin-left:18rpx;">{{data.createDate}}</view>
			</view>
		</view>
		<view class="wave">
			<image style="width:124rpx;height:124rpx;" src="https://oss.jxhecong.com/v2/image/wave@2x.png"></image>
			<view class="progress" :style="{'font-size':data.orderType==1?'24rpx':'36rpx'}">{{data.orderType==1?'充电中':`${data.percentage}%`}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			data:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.cell{
		background-color:#FFFFFF;
		padding:24rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex{
		display:flex;
		justify-content: flex-start;
		align-items: center;
	}
	.device-name{
		color:#303133;
		font-size:28rpx;
		font-weight: bold;
	}
	.item-name{
		color:#606266;
		font-size:24rpx;
	}
	.wave{
		width:120rpx;
		height:120rpx;
		position: relative;
	}
	.progress{
		position: absolute;
		left:50%;
		top:50%;
		color:#FFFFFF;
		font-size:36rpx;
		width:100%;
		text-align: center;
		transform:translate(-50%,-50%);
	}
</style>
